<template>
    <main>
		<section class="text-right">
            <a class="btn-link" @click="$router.back()">返回上一页</a>
		</section>
        <Table>
            <template v-slot:thead>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品数量</th>
                <th>商品单价</th>
                <th>总金额</th>
            </template>
            <tr v-for="orderItem in orderItemList" :key="orderItem.id">
                <th>{{ orderItem.id }}</th>
                <td>{{ orderItem.name }}</td>
                <td>{{ orderItem.count }}</td>
                <td>{{ orderItem.price }}</td>
                <td>{{ orderItem.totalPrice }}</td>
            </tr>
        </Table>
	</main>
</template>

<script>
    import Table from '../../components/Table.vue';
    import orderService from '../../service/OrderService';

    /**
     * 订单详情
     */
    export default {
        components: {
            Table
        },
        data() {
            return {
                orderItemList: [],
            }
        },
        created() {
            orderService.getOrderDetail(this.$route.params.orderId)
                .then(orderItemList => this.orderItemList = orderItemList);
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    section {
        padding: 10px 10px 10px 0;
    }
</style>